<template>
  <view class="live-litigation-container box-border">
    <view class="bg-white sticky z-10 top-[0rpx]">
      <view
        class="h-[110rpx] flex flex-row items-center justify-around relative"
      >
        <view
          class="tab-line bg-[#1E92F0] rounded-[3rpx] w-[42rpx] h-[8rpx]"
          :style="tabLineStyle"
        ></view>
        <template v-for="(item, index) in tabMenus" :key="index">
          <view
            :style="
              currentTab == item.id
                ? 'color:#1E92F0;font-size: 32rpx;'
                : 'color:#666666;font-size: 28rpx;'
            "
            @click="onChangeTab(item.id)"
            >{{ item.name }}</view
          >
        </template>
      </view>
    </view>
    <!-- 工作日时间 -->
    <tempale v-if="currentTab === 2">
      <view class="gap-line mx-[30rpx]"></view>
      <view
        class="week-row px-[30rpx] bg-white h-[130rpx] flex flex-row justify-between items-center"
      >
        <template v-for="(item, index) in dateArr" :key="index">
          <view
            class="week-item flex flex-col justify-center items-center rounded-[16rpx] w-[138rpx] h-[78rpx]"
            :class="date === index ? 'active-week' : 'normal-week'"
            @click="date = index"
          >
            <view class="time text-[22rpx]">{{ item.time }}</view>
            <view class="week-date text-[24rpx]">{{ item.weekDay }}</view>
          </view>
        </template>
      </view>
    </tempale>

    <view class="content mt-[20rpx]">
      <watchLive v-if="currentTab === 0"></watchLive>
      <lookBack v-if="currentTab === 1"></lookBack>
      <bookLive v-if="currentTab === 2"></bookLive>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import bookLive from "./components/bookLive.vue";
import watchLive from "./components/watchLive.vue";
import lookBack from "./components/lookBack.vue";

const tabMenus = reactive([
  {
    id: 0,
    name: "直播观看",
  },
  {
    id: 1,
    name: "录播回看",
  },
  {
    id: 2,
    name: "预约直播",
  },
]);
const currentTab = ref(0);
const tabLineStyle = ref("transform: translateX(-246rpx)");
const dateArr = reactive([
  {
    time: "05.09",
    weekDay: "星期一",
  },
  {
    time: "05.10",
    weekDay: "星期二",
  },
  {
    time: "05.11",
    weekDay: "星期三",
  },
  {
    time: "05.12",
    weekDay: "星期四",
  },
  {
    time: "05.13",
    weekDay: "星期五",
  },
]);
const date = ref(0);

// 初始化加载
onMounted(() => {});

const onChangeTab = (tabIndex: any) => {
  currentTab.value = tabIndex;
  if (tabIndex == 0) {
    tabLineStyle.value = "transform: translateX(-246rpx)";
  }
  if (tabIndex == 1) {
    tabLineStyle.value = "transform: translateX(0rpx)";
  }
  if (tabIndex == 2) {
    tabLineStyle.value = "transform: translateX(246rpx)";
  }
};
const fabClick = () => {};
</script>

<style lang="scss" scoped>
.live-litigation-container {
  /* 留出底部安全区域 */
  padding-bottom: calc(
    20rpx + constant(safe-area-inset-bottom)
  ); /* iOS < 11.2 */
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* iOS >= 11.2 */
  .tab-line {
    position: absolute;
    top: 75rpx;
    transition-property: color, -webkit-transform;
    transition-property: transform, color;
    transition-property: transform, color, -webkit-transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
  .gap-line {
    border-top: 1rpx solid #e8e9ec;
  }
  .week-row {
    .active-week {
      background: #1e92f0;
      color: #fff;
    }
    .normal-week {
      .time {
        color: #999999;
      }
      .week-date {
        color: #666666;
      }
    }
  }
}
</style>
